<template>
  <div>
		<BreadCrumb />
		<el-space>
			<el-button type="primary" @click="showDialog=true">导入Excel</el-button>
			<el-button type="primary" v-if="tableData.length > 0" @click="save">保存</el-button>
		</el-space>
		<student-table
			:list="tableData"></student-table>
		<el-dialog
			v-model="showDialog"
			width="500px"
			title="学生导入"
			:close-on-click-modal="false">
			<el-link style="margin-bottom: 10px;" type="primary" :underline="false" href="/static/doc/学生导入模版.xlsx">下载模版</el-link>
			<el-upload
				action="#"
				drag
				:show-file-list="false"
				:on-change="upload"
				:auto-upload="false">
				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
				<div class="el-upload__text">
					拖拽文件到这里 或者<em>点击上传</em>
				</div>
			</el-upload>
		</el-dialog>
  </div>
</template>

<script setup>
import BreadCrumb from '@@/menu/breadcrumb'
import Schema from 'async-validator'
import StudentTable from '@@/student/table'
import { ElMessageBox, ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { post, get } from '@/axios'
const tableData = ref([])
const showDialog = ref(false)

function check (field, value, callback) {
	get('/umsStudent/check', { field, value }, content => {
		if (content) {
			callback()
		} else {
			callback(new Error())
		}
	})
}

function chongfu (field, value, callback) {
	let count = 0
	const tb = tableData.value
	for (const i in tb) {
		if (tb[i][field] === value && ++count > 1) {
			callback(new Error())
			return
		}
	}
	callback()
}
const rules = {
	name: [
		{ required: true, message: '请输入学生姓名', trigger: 'blur' },
		{ max: 20, message: '学生姓名最多20个字符', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
		{ validator: (rule,value,callback) => { chongfu('phone', value, callback) }, message: '手机号已经被使用', trigger: 'blur' },
		{ validator: (rule,value,callback) => { check('phone', value, callback) }, message: '手机号已经被使用', trigger: 'blur' }
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的电子信箱', trigger: 'blur' },
		{ max: 64, message: '电子信箱最多64个字符', trigger: 'blur' },
		{ validator: (rule,value,callback) => { chongfu('email', value, callback) }, message: '电子信箱已经被使用', trigger: 'blur' },
		{ validator: (rule,value,callback) => { check('email', value, callback) },message: '电子信箱已经被使用', trigger: 'blur' }
	],
	birthday: [
		{ required: true, message: '请选择生日', trigger: 'blur' }
	],
	school: [
		{ required: true, message: '请输入学校', trigger: 'blur' },
		{ max: 20, message: '学校最多20个字符', trigger: 'blur' },
	],
	major: [
		{ required: true, message: '请输入专业', trigger: 'blur' },
		{ max: 20, message: '专业最多20个字符', trigger: 'blur' },
	],
	qualification: [
		{ required: true, message: '请选择学历', trigger: 'blur' }
	]
}
function upload(file) {
	post('/umsStudent/uploadList', { file: file.raw }, content => {
		tableData.value = content
		showDialog.value = false
	})
}
function save() {
	ElMessageBox.confirm('确定要将学生信息保存吗?', '提示', {
		type: 'primary',
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(() => {
		const validator = new Schema(rules)
		const table = tableData.value
		const errorList = []
		for (const i in table) {
			errorList.push(validator.validate(table[i]))
		}
		Promise.allSettled(errorList).then((values) => {
			const messageList = []
			for (const i in values) {
				if (values[i].status === 'rejected') {
					for (const j in values[i].reason.errors) {
						const rowIndex = parseInt(i) + 1
						messageList.push(`第${rowIndex}行, ${values[i].reason.errors[j].message}`)
					}
				}
			}
			if (messageList.length === 0) {
				post('/umsStudent/saveBatch', { list: JSON.stringify(tableData.value) }, content => {
					tableData.value = []
				})
			} else {
				ElMessage.error({
					message: messageList.join('\n').replace(/\\n/g, '\n'),
					duration: 0,
					showClose: true
				})
			}
		}).catch(e => {
			console.dir(e)
		})
	}).catch(() => {})
}
</script>

<style scoped lang="scss">
.el-space {
	margin-bottom: 10px;
}
</style>